<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_子项目排列方式</title>
  <style>
    .container {
      width: 1500px;
      background-color: lightgreen;
      /* 弹性布局: 子元素会自动成为弹性项目 */
      /*给父容器设置弹性布局*/
      display: flex;
      /*子项目排列方式*/
      justify-content: flex-start;
      justify-content: flex-end;
      justify-content: space-between;
      justify-content: space-around;
      justify-content: center;
      justify-content: space-evenly;
      /*交叉轴*/
      height: 500px;
      align-items: flex-start;/*交叉轴起点对齐*/
      align-items: flex-end;/*交叉轴终点对齐*/
      align-items: center;/*交叉轴居中对齐*/
    }
    .item {
      width: 100px;
      height: 100px;
      background-color: lightyellow;
      border: 3px solid deeppink;
      font-size: 45px;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>
</body>
</html>

